<template>
  <div class="banner-container">
    <!-- 轮播图主体 -->
    <div class="banner-wrapper" @mouseenter="pauseAutoPlay" @mouseleave="resumeAutoPlay">
      <div 
        class="banner-slides" 
        :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
      >
        <div 
          v-for="(item, index) in bannerData" 
          :key="index"
          class="banner-slide"
        >
          <img 
            :src="item.image" 
            :alt="item.title"
            class="banner-image"
            loading="eager"
            @load="onImageLoad"
            @error="onImageError"
          />
          <div class="banner-overlay"></div>
          <div class="banner-content">
            <h2 class="banner-title">{{ item.title }}</h2>
            <p class="banner-description">{{ item.description }}</p>
          </div>
        </div>
      </div>

      <!-- 左右箭头 -->
      <button 
        class="banner-arrow banner-arrow-left" 
        @click="prevSlide"
        aria-label="上一张"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="arrow-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <button 
        class="banner-arrow banner-arrow-right" 
        @click="nextSlide"
        aria-label="下一张"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="arrow-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>

      <!-- 指示器 -->
      <div class="banner-indicators">
        <button
          v-for="(item, index) in bannerData"
          :key="index"
          class="indicator"
          :class="{ active: index === currentIndex }"
          @click="goToSlide(index)"
          :aria-label="`切换到第 ${index + 1} 张`"
        ></button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'

// 导入图片资源
import img1 from '../assets/img/1.png'
import img2 from '../assets/img/2.jpg'
import img3 from '../assets/img/3.jpg'

// Props
const props = defineProps<{
  debug?: boolean
  interval?: number
  height?: number
}>()

// 默认配置
const AUTO_PLAY_INTERVAL = props.interval || 5000
const BANNER_HEIGHT = props.height || 500

// 轮播图数据
const bannerData = [
  {
    image: img1,
    title: '专业工业胶水制造商',
    description: '为各行业提供高性能、环保的粘胶解决方案'
  },
  {
    image: img2,
    title: '研发创新，品质保障',
    description: '拥有专业研发团队，严格的质量管理体系'
  },
  {
    image: img3,
    title: '定制化解决方案',
    description: '根据客户需求提供个性化的胶水应用方案'
  }
]

// 状态
const currentIndex = ref(0)
let autoPlayTimer: number | null = null
let isPaused = false

// 下一张
const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % bannerData.length
}

// 上一张
const prevSlide = () => {
  currentIndex.value = (currentIndex.value - 1 + bannerData.length) % bannerData.length
}

// 跳转到指定幻灯片
const goToSlide = (index: number) => {
  if (index >= 0 && index < bannerData.length) {
    currentIndex.value = index
  }
}

// 开始自动播放
const startAutoPlay = () => {
  stopAutoPlay()
  if (!isPaused) {
    autoPlayTimer = window.setInterval(() => {
      nextSlide()
    }, AUTO_PLAY_INTERVAL)
  }
}

// 停止自动播放
const stopAutoPlay = () => {
  if (autoPlayTimer !== null) {
    clearInterval(autoPlayTimer)
    autoPlayTimer = null
  }
}

// 暂停自动播放（鼠标悬停时）
const pauseAutoPlay = () => {
  isPaused = true
  stopAutoPlay()
}

// 恢复自动播放（鼠标离开时）
const resumeAutoPlay = () => {
  isPaused = false
  startAutoPlay()
}

// 图片加载成功
const onImageLoad = () => {
  if (props.debug) {
    console.log('Banner 图片加载成功')
  }
}

// 图片加载失败
const onImageError = (e: Event) => {
  console.error('Banner 图片加载失败:', e)
  const target = e.target as HTMLImageElement
  if (target) {
    target.style.opacity = '0.5'
  }
}

// 生命周期
onMounted(() => {
  startAutoPlay()
  if (props.debug) {
    console.log('Banner 组件已挂载，共', bannerData.length, '张图片')
  }
})

onBeforeUnmount(() => {
  stopAutoPlay()
})
</script>

<style scoped>
.banner-container {
  width: 100%;
  position: relative;
}

.banner-wrapper {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background-color: #f0f2f5;
}

.banner-slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.banner-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  min-width: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
}

.banner-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1.5rem 3rem;
  color: white;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}

@media (min-width: 768px) {
  .banner-content {
    padding: 3rem 2rem 4rem;
  }
}

.banner-title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

.banner-description {
  font-size: clamp(0.9rem, 2vw, 1.25rem);
  opacity: 0.95;
  max-width: 800px;
  margin: 0 auto;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.6;
  padding: 0 1rem;
}

/* 左右箭头 */
.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  color: white;
}

.banner-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.banner-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.banner-arrow-left {
  left: 20px;
}

.banner-arrow-right {
  right: 20px;
}

.arrow-icon {
  width: 24px;
  height: 24px;
}

/* 指示器 */
.banner-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  outline: none;
}

.indicator:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.2);
}

.indicator.active {
  background: white;
  width: 32px;
  border-radius: 6px;
  border-color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner-wrapper {
    height: 400px;
  }

  .banner-content {
    padding: 2rem 1.5rem 3rem;
  }

  .banner-title {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
  }

  .banner-description {
    font-size: 1rem;
  }

  .banner-arrow {
    width: 40px;
    height: 40px;
  }

  .banner-arrow-left {
    left: 10px;
  }

  .banner-arrow-right {
    right: 10px;
  }

  .arrow-icon {
    width: 20px;
    height: 20px;
  }

  .banner-indicators {
    bottom: 15px;
    gap: 8px;
  }

  .indicator {
    width: 10px;
    height: 10px;
  }

  .indicator.active {
    width: 24px;
  }
}

@media (max-width: 480px) {
  .banner-wrapper {
    height: 300px;
  }

  .banner-content {
    padding: 1.5rem 1rem 2.5rem;
  }

  .banner-title {
    font-size: 1.5rem;
  }

  .banner-description {
    font-size: 0.9rem;
  }
}
</style>
